<template>

    <van-popup
            v-model="showArea"
            position="bottom"
            @close="closeArea"
            class="popDiv"
    >

        <div>
            <img :src="closeimg" @click="closeArea"/>
            <div class="titleDiv">{{title}}</div>

            <div class="tabbarDiv">
                <!--<div-->
                        <!--@click="clickTypeTabbar"-->
                        <!--v-bind:class="{-->
            <!--tabbarItemSelect: !selectType,-->
            <!--tabbarItemDefault: selectType-->
          <!--}"-->
                <!--&gt;-->
                    <!--一级区域-->
                <!--</div>-->
                <div
                        v-show="selectType"
                        v-bind:class="{
            tabbarItemSelect: selectType,
            tabbarItemDefault: !selectType
          }"
                >
                    选择区域
                </div>
            </div>



            <!--<div class="listViewDiv" v-show="!selectType">-->
                <!--<div-->
                        <!--v-for="(item, index) in list"-->
                        <!--class="listItemDefault"-->
                        <!--@click="clickGroupWithIndex(index)"-->
                <!--&gt;-->
                    <!--{{ item.groupName }}-->
                <!--</div>-->
            <!--</div>-->

            <div class="listViewDiv" v-show="selectType">
                <div
                        v-for="(item, index) in areaList"
                        class="listItemDefault"
                        @click="clickItemWithItem(item)"
                >
                    {{ item.areaName }}
                </div>
            </div>



            <!--<div class="listViewDiv">-->
                <!--<div class="listItemDefault" v-for="item in list" @click="selectItem(item)">-->
                    <!--{{item.areaName}}-->
                <!--</div>-->
            <!--</div>-->

        </div>

    </van-popup>

</template>


<script>
    import {api_repairArea,api_repairAreaGroup} from "@/service/api/repair"

    export default {
        name: "SelectAreaPopup",
        data(){
            return{
                closeimg: require("@/images/icon/login/delete.png"),
                list:[],
                areaList:[],
                selectType: true,
                selectNum: 0,
            }
        },
        props:{
            title:String,
            showArea:Boolean,
            areaArray:Array,
            showClick:Function,
            selectItem:Function,
            closeArea:Function
        },
        methods:{
            clickTypeTabbar() {
                this.selectType = false;
                this.areaList = [];
            },
            clickGroupWithIndex(index) {
                console.log(index);
                this.selectNum = index;
                var item = this.list[index];
                this.requestAreaData(item.id);

                this.selectType = true;
            },
            clickItemWithItem(item) {
                // var groupItem = this.list[this.selectNum];

                let result = {
                    // groupItem: groupItem,
                    areaItem: item
                };
                this.selectItem(result);
            },
            requestAreaData() {

                api_repairArea()
                    .then(res => {
                        this.areaList = res.data;
                    })
                    .catch(() => {});
            },
            requestData(){
                api_repairAreaGroup().then((res)=>{
                    this.list = res.data;
                }).catch(()=>{

                })
            }
        },
        created(){
            this.requestAreaData();
            // this.requestData();
        }
    }
</script>

<style scoped>
    .popDiv {
        display: flex;
        flex-direction: column;
        justify-content: start;
    }
    .titleDiv {
        height: 1.8666666666666667rem;
        font-size: 1.3333333333333333rem;
        font-family: PingFangSC-Medium, PingFangSC;
        font-weight: 500;
        color: rgba(18, 28, 50, 1);
        line-height: 1.8666666666666667rem;
        margin: 1.4333333333333333rem 1.3333333333333333rem;
    }
    img {
        margin-top: 1.3333333333333333rem;
        margin-left: 1.3333333333333333rem;

        height: 1rem;
        width: 1rem;
    }
    .tabbarDiv {
        margin-left: 1.3333333333333333rem;
        height: 2.7333333333333334rem;
        display: flex;
        flex-direction: row;
        justify-content: start;
        border-bottom: 0.5px solid #f0f1f5;
    }
    .tabbarItemDefault {
        margin-right: 2.3333333333333335rem;

        height: 2.7333333333333334rem;
        font-size: 0.9333333333333333rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(18, 28, 50, 1);
        line-height: 2.7333333333333334rem;
    }
    .tabbarItemSelect {
        margin-right: 2.3333333333333335rem;

        height: 2.7333333333333334rem;
        font-size: 0.9333333333333333rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(150, 151, 153, 1);
        line-height: 2.7333333333333334rem;

        border-bottom: 2px solid #3388ff;
    }
    .listViewDiv {
        /*border-bottom: 0.5px solid #f0f1f5;*/
        /*margin-bottom: 4rem;*/
        overflow-y: auto;
        height: 15rem;
        padding-left: 1.3333333333333333rem;
        padding-top: 0.8666666666666667rem;
    }
    .listItemDefault {
        height: 1.2rem;
        font-size: 0.9333333333333333rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(18, 28, 50, 1);
        line-height: 1.2rem;
        margin-bottom: 1rem;
    }
</style>